import React, { Component } from "react";
import { Button, Table,Modal,Input} from 'antd'
const { Column } = Table
let tableData = [
    {key:'1', county: '二环以内' },
    {key:'2', county: '三环至二环'},
]
class Hxwz extends Component{
    constructor(){
        super()
        this.state = {
            tableData:tableData,
            visible:false,
            bjinputv:''
        }
    }
    //modal
    modalCancel=()=>{
        this.setState({
            visible:false
        })
        // this.componentDidMount()
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let arr = []
        tableData.forEach((item)=>{
            arr.push(item.key)
        })
        let num = parseInt( arr.sort((a,b)=>{
            return b-a
        }))
        // console.log(num);
        let obj = {
            key:num+1,
            county:this.state.bjinputv,
        }
        // console.log(obj);
        let alldata = [...this.state.tableData]
        this.setState({
            tableData:[...alldata,obj]
        })
    }
    addhx=()=>{
        this.setState({
            visible:true
        })
    }
    setinputvalue=(e)=>{
        this.setState({
            bjinputv:e.target.value
        })
    }
    deleteRow=(obj)=>{
        console.log(obj);
        let mydata = []
        this.state.tableData.forEach((item)=>{
            mydata.push(item.key)
        })
        let num = mydata.indexOf(obj.key)
        this.state.tableData.splice(num,1)
        let testdata = [...this.state.tableData]
        this.setState({
            tableData:testdata
        })
    }
    deleteTags=(obj)=>{
        let mydata = []
        this.state.tableData.forEach((item)=>{
            mydata.push(item.key)
        })
        let num = mydata.indexOf(obj.key)
        this.state.tableData.splice(num,1,obj)
        let testdata = [...this.state.tableData]
        this.setState({
            tableData:testdata
        })
    }
    render() {
        return (
            <div>
                <div style={{  padding: '0 0 10px' }}>
                    <Button onClick={this.addhx} type='primary'>新增环线</Button>
                </div>
                <div>
                    <Table dataSource={this.state.tableData}  >
                        <Column width='73%' title='环线' dataIndex='county' key='county' />
                        <Column title='操作' key='action' render={(text,record)=>
                            <span>
                                <MyBtn deleteData={this.deleteRow} bjrowdata={this.deleteTags} rowdata={record}/>
                            </span>
                        } />
                    </Table>
                </div>
                <Modal
                    title="新增"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key='modalquxiao' onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    <Input value = {this.state.bjinputv} onChange={this.setinputvalue}/>
                </Modal>
            </div>
        )
    }
}
class MyBtn extends Component{
    constructor(){
        super()
        this.state = {
            visible:false,
            roudata:[],
            bjinputv:'',
            //删除MODAL
            Dievisible:false
        }
    }
    componentDidMount(){
        this.setState({
            bjinputv:this.props.rowdata.county
        })
    }
    modalCancel=()=>{
        this.setState({
            visible:false
        })
        this.componentDidMount()
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let testobj = this.props.rowdata
        testobj.county = this.state.bjinputv
        this.props.bjrowdata(testobj)
    }
    setinputvalue=(e)=>{
        this.setState({
            bjinputv:e.target.value
        })
    }
    deleteCol=()=>{
        this.setState({
            Dievisible: true,
        });
    }
    //删除modalOK
    diemodalok=()=>{
        this.setState({
            Dievisible: false,
        });
        this.props.deleteData(this.props.rowdata)
    }
    //删除modalclear
    diemodalclear=()=>{
        this.setState({
            Dievisible: false,
        });
    }
    Hxwzbj=()=>{
        // console.log('bianji');
        this.setState({
            visible:true
        })
        this.componentDidMount()
    }
    render(){
        return(
            <div>
                <Button onClick={this.Hxwzbj}>编辑</Button>
                <Button onClick={this.deleteCol} >删除</Button>
                {/* 编辑 */}
                <Modal
                    title="编辑"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key='modalquxiao' onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    <Input value = {this.state.bjinputv} onChange={this.setinputvalue}/>
                </Modal>
                {/* 提示 */}
                <Modal
                    title="提示"
                    visible={this.state.Dievisible}
                    footer={[
                        <Button key='diemodalqueding' type='primary'  onClick={this.diemodalok}>
                            确定
                        </Button>,
                        <Button key='diemodalquxiao' onClick={this.diemodalclear}>
                            取消
                        </Button>
                    ]}
                    >
                    <p>你确定要删除吗？</p>
                </Modal>
            </div>
        )
    }
}
export default Hxwz;